<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>好"孕"来 - 管理者模块</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(135deg, #fff9fb 0%, #fff5f7 100%);
      color: #333;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M50,50 Q100,20 150,50 T200,100 Q170,150 100,150 T0,100 Q30,50 50,50 Z" fill="rgba(255,182,193,0.1)"/></svg>');
      background-size: 300px;
      opacity: 0.3;
      z-index: -1;
    }

    .header {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      padding: 20px 15px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      box-shadow: 0 2px 15px rgba(0,0,0,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    .header h1 {
      font-size: 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.25);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .container {
      padding: 90px 15px 30px;
      max-width: 600px;
      margin: 0 auto;
    }

    .section-card {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 20px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .section-card::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 100px;
      height: 100px;
      background: rgba(255, 182, 193, 0.2);
      border-radius: 50%;
      z-index: -1;
    }

    .section-title {
      font-size: 19px;
      margin-bottom: 15px;
      color: #5a2d3e;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-icon {
      font-size: 24px;
    }

    .service-item {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .service-item:hover {
      background: rgba(255, 182, 193, 0.05);
      margin: 0 -25px;
      padding-left: 25px;
      padding-right: 25px;
      border-radius: 12px;
    }

    .service-item:last-child {
      border-bottom: none;
    }

    .service-name {
      font-size: 16px;
      color: #333;
    }

    .service-desc {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 4px;
    }

    .arrow {
      font-size: 18px;
      color: #ccc;
    }

    .btn {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      border: none;
      padding: 14px;
      border-radius: 30px;
      font-size: 16px;
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      border: 1px solid rgba(255,255,255,0.4);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    /* 子页面样式 */
    .page {
      display: none;
      animation: fadeIn 0.4s ease-out;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 15px;
      color: #5a2d3e;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 14px;
      border: 1px solid rgba(255, 182, 193, 0.4);
      border-radius: 12px;
      font-size: 15px;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.7);
    }

    .form-control:focus {
      outline: none;
      border-color: #ff9a9e;
      box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.2);
    }

    textarea.form-control {
      resize: vertical;
      min-height: 100px;
    }

    .status-badge {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(123, 239, 178, 0.15);
      color: #0c8f61;
      border: 1px solid rgba(123, 239, 178, 0.3);
    }

    .status-badge.busy {
      background: rgba(255, 182, 193, 0.15);
      color: #d63384;
      border-color: rgba(255, 182, 193, 0.3);
    }

    .info-text {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 10px;
      line-height: 1.5;
    }

    .chart-placeholder {
      width: 100%;
      height: 200px;
      background: rgba(255, 182, 193, 0.1);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #d63384;
      font-size: 18px;
      margin: 15px 0;
      border: 1px solid rgba(255, 182, 193, 0.3);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin: 15px 0;
    }

    .stat-item {
      background: rgba(255, 255, 255, 0.7);
      border-radius: 15px;
      padding: 15px;
      text-align: center;
      border: 1px solid rgba(255, 182, 193, 0.3);
    }

    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #d63384;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 13px;
      color: #8a6d7c;
    }

    @media (max-width: 480px) {
      .header h1 {
        font-size: 18px;
      }
    }

    /* 模态框样式 */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 2000;
      animation: fadeIn 0.3s ease;
    }

    .modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      background: white;
      border-radius: 20px;
      padding: 25px;
      max-width: 90%;
      max-height: 90%;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .modal-title {
      font-size: 20px;
      color: #5a2d3e;
      font-weight: 600;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: #ccc;
      cursor: pointer;
      padding: 5px;
    }

    .chart-container {
      margin: 20px 0;
      padding: 15px;
      background: rgba(255, 182, 193, 0.05);
      border-radius: 15px;
      border: 1px solid rgba(255, 182, 193, 0.2);
    }

    .chart-title {
      font-size: 16px;
      color: #5a2d3e;
      margin-bottom: 15px;
      text-align: center;
      font-weight: 500;
    }

    .chart {
      width: 100%;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      border-radius: 10px;
      border: 1px solid rgba(255, 182, 193, 0.3);
    }

    .pie-chart {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .bar-chart {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      padding: 20px;
    }

    .bar-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      margin: 0 5px;
    }

    .bar-stack {
      width: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 150px;
      margin-bottom: 10px;
    }

    .bar-segment {
      width: 100%;
      border-radius: 3px 3px 0 0;
    }

    .bar-label {
      font-size: 12px;
      color: #8a6d7c;
      text-align: center;
      transform: rotate(-45deg);
      white-space: nowrap;
    }

    .line-chart {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .gantt-chart {
      width: 100%;
      height: 100%;
      overflow-x: auto;
    }

    .gantt-row {
      display: flex;
      align-items: center;
      margin: 10px 0;
      font-size: 12px;
    }

    .gantt-label {
      width: 80px;
      color: #5a2d3e;
      font-weight: 500;
    }

    .gantt-timeline {
      flex: 1;
      height: 20px;
      background: rgba(255, 182, 193, 0.1);
      border-radius: 10px;
      position: relative;
      margin-left: 10px;
    }

    .gantt-bar {
      position: absolute;
      height: 100%;
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 10px;
      font-weight: 500;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      margin-top: 15px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: #5a2d3e;
    }

    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }
  </style>
</head>

<!-- 通过js动态加载 备注：本次修改 -->
<script src="guanli.js"></script>

<body>

  <!-- 管理者模块主页面 -->
  <div id="mainPage" class="page active">
    <div class="header">
      <button class="back-btn" onclick="window.location.href='index.html'">返回</button>
      <h1>好"孕"来 - 管理者模块</h1>
    </div>

    <div class="container">
      <!-- 数据看板 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📊</span>
          关键指标卡片
        </div>
        <!-- 增加id 方便获取item 备注：本次修改 -->
        <div class="stat-grid" id="statGrid">
          <div class="stat-item">
            <div class="stat-number">-</div>
            <div class="stat-label">女性职工总数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">-</div>
            <div class="stat-label">在孕人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">-</div>
            <div class="stat-label">哺乳期人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">-</div>
            <div class="stat-label">孕晚期在岗</div>
          </div>
        </div>
        <div class="service-item" onclick="showChartsModal()">
          <div>
            <div class="service-name">查看详细数据</div>
            <div class="service-desc">婚育分布、部门分析、趋势预测、产假规划</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 资源调度 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon"⚙️</span>
          资源调度
        </div>
        <div class="service-item" onclick="showPage('casePoolPage')">
          <div>
            <div class="service-name">案源分配</div>
            <div class="service-desc">待审案件池、任务量调整、跨单元支援</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('vpnPage')">
          <div>
            <div class="service-name">VPN资源</div>
            <div class="service-desc">实时占用、预约审批、优先级调整</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('carePage')">
          <div>
            <div class="service-name">关怀资源</div>
            <div class="service-desc">母婴室、车位、营养餐配额与使用统计</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 预警中心 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">⚠️</span>
          预警中心
        </div>
        <div class="service-item" onclick="showPage('deadlinePage')">
          <div>
            <div class="service-name">审限预警</div>
            <div class="service-desc">即将到期案件、协办进展、互助池状态</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('healthPage')">
          <div>
            <div class="service-name">健康预警</div>
            <div class="service-desc">孕晚期名单、产检逾期、心理评估异常</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 数据导出 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📥</span>
          数据导出
        </div>
        <div class="service-item" onclick="showPage('exportPage')">
          <div>
            <div class="service-name">一键导出</div>
            <div class="service-desc">PNG高清图、PDF报告、Excel数据表</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 图表模态框 -->
  <div id="chartsModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">详细数据分析</h2>
        <button class="close-btn" onclick="closeChartsModal()">&times;</button>
      </div>

      <!-- 婚育状态分布饼图 -->
      <div class="chart-container" id="marriageStatusChart">
        <div class="chart-title">女性职工婚育状态分布</div>
        <div class="chart">
          <div class="pie-chart">
            <svg viewBox="0 0 200 200" width="200" height="200">
              <!-- 未婚 30% -->
              <circle cx="100" cy="100" r="80" fill="none" stroke="#ff9a9e" stroke-width="40" 
                      stroke-dasharray="150.8 251.3" stroke-dashoffset="0" transform="rotate(-90 100 100)"/>
              <!-- 已婚未育 25% -->
              <circle cx="100" cy="100" r="80" fill="none" stroke="#fad0c4" stroke-width="40" 
                      stroke-dasharray="125.7 251.3" stroke-dashoffset="-150.8" transform="rotate(-90 100 100)"/>
              <!-- 在孕 16% -->
              <circle cx="100" cy="100" r="80" fill="none" stroke="#a18cd1" stroke-width="40" 
                      stroke-dasharray="80.4 251.3" stroke-dashoffset="-276.5" transform="rotate(-90 100 100)"/>
              <!-- 已育 29% -->
              <circle cx="100" cy="100" r="80" fill="none" stroke="#fbc2eb" stroke-width="40" 
                      stroke-dasharray="145.7 251.3" stroke-dashoffset="-356.9" transform="rotate(-90 100 100)"/>
            </svg>
          </div>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color" style="background: #ff9a9e;"></div>
            <span>未婚 (30%)</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #fad0c4;"></div>
            <span>已婚未育 (25%)</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #a18cd1;"></div>
            <span>在孕 (16%)</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #fbc2eb;"></div>
            <span>已育 (29%)</span>
          </div>
        </div>
      </div>

      <!-- 部门分布堆叠柱状图 -->
      <div class="chart-container" id="deptMarriageTable">
        <div class="chart-title">各部门婚育状态分布</div>
        <div class="chart">
          <div class="bar-chart">
            <div class="bar-group">
              <div class="bar-stack">
                <div class="bar-segment" style="height: 20%; background: #ff9a9e;"></div>
                <div class="bar-segment" style="height: 25%; background: #fad0c4;"></div>
                <div class="bar-segment" style="height: 15%; background: #a18cd1;"></div>
                <div class="bar-segment" style="height: 40%; background: #fbc2eb;"></div>
              </div>
              <div class="bar-label">xx科室</div>
            </div>
            <div class="bar-group">
              <div class="bar-stack">
                <div class="bar-segment" style="height: 25%; background: #ff9a9e;"></div>
                <div class="bar-segment" style="height: 20%; background: #fad0c4;"></div>
                <div class="bar-segment" style="height: 20%; background: #a18cd1;"></div>
                <div class="bar-segment" style="height: 35%; background: #fbc2eb;"></div>
              </div>
              <div class="bar-label">xx科室</div>
            </div>
            <div class="bar-group">
              <div class="bar-stack">
                <div class="bar-segment" style="height: 30%; background: #ff9a9e;"></div>
                <div class="bar-segment" style="height: 30%; background: #fad0c4;"></div>
                <div class="bar-segment" style="height: 10%; background: #a18cd1;"></div>
                <div class="bar-segment" style="height: 30%; background: #fbc2eb;"></div>
              </div>
              <div class="bar-label">xx科室</div>
            </div>
            <div class="bar-group">
              <div class="bar-stack">
                <div class="bar-segment" style="height: 35%; background: #ff9a9e;"></div>
                <div class="bar-segment" style="height: 25%; background: #fad0c4;"></div>
                <div class="bar-segment" style="height: 10%; background: #a18cd1;"></div>
                <div class="bar-segment" style="height: 30%; background: #fbc2eb;"></div>
              </div>
              <div class="bar-label">xx科室</div>
            </div>
          </div>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color" style="background: #ff9a9e;"></div>
            <span>未婚</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #fad0c4;"></div>
            <span>已婚未育</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #a18cd1;"></div>
            <span>在孕</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #fbc2eb;"></div>
            <span>已育</span>
          </div>
        </div>
      </div>

      <!-- 趋势折线图 -->
      <div class="chart-container" id="trendChart">
        <div class="chart-title">新增孕妇数量（过去12个月）</div>
        <div class="chart">
          <div class="line-chart">
            <svg viewBox="0 0 400 200" width="100%" height="100%">
              <!-- 网格线 -->
              <line x1="40" y1="20" x2="40" y2="180" stroke="#e0e0e0" stroke-width="1"/>
              <line x1="40" y1="180" x2="360" y2="180" stroke="#e0e0e0" stroke-width="1"/>
              
              <!-- 折线 -->
              <polyline points="40,150 80,140 120,130 160,125 200,120 240,115 280,110 320,105 360,100" 
                        fill="none" stroke="#ff9a9e" stroke-width="3"/>
              
              <!-- 数据点 -->
              <circle cx="40" cy="150" r="4" fill="#ff9a9e"/>
              <circle cx="80" cy="140" r="4" fill="#ff9a9e"/>
              <circle cx="120" cy="130" r="4" fill="#ff9a9e"/>
              <circle cx="160" cy="125" r="4" fill="#ff9a9e"/>
              <circle cx="200" cy="120" r="4" fill="#ff9a9e"/>
              <circle cx="240" cy="115" r="4" fill="#ff9a9e"/>
              <circle cx="280" cy="110" r="4" fill="#ff9a9e"/>
              <circle cx="320" cy="105" r="4" fill="#ff9a9e"/>
              <circle cx="360" cy="100" r="4" fill="#ff9a9e"/>
              
              <!-- X轴标签 -->
              <text x="40" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">1月</text>
              <text x="80" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">2月</text>
              <text x="120" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">3月</text>
              <text x="160" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">4月</text>
              <text x="200" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">5月</text>
              <text x="240" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">6月</text>
              <text x="280" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">7月</text>
              <text x="320" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">8月</text>
              <text x="360" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">9月</text>
              
              <!-- Y轴标签 -->
              <text x="25" y="25" font-size="10" fill="#8a6d7c" text-anchor="end">25</text>
              <text x="25" y="65" font-size="10" fill="#8a6d7c" text-anchor="end">20</text>
              <text x="25" y="105" font-size="10" fill="#8a6d7c" text-anchor="end">15</text>
              <text x="25" y="145" font-size="10" fill="#8a6d7c" text-anchor="end">10</text>
              <text x="25" y="185" font-size="10" fill="#8a6d7c" text-anchor="end">5</text>
            </svg>
          </div>
        </div>
      </div>

      <!-- 孕期甘特图 -->
      <div class="chart-container">
        <div class="chart-title">预产期分布图（未来6个月）</div>
        <div class="chart">
          <div class="gantt-chart">
            <div class="gantt-row">
              <div class="gantt-label">xx科室</div>
              <div class="gantt-timeline">
                <div class="gantt-bar" style="left: 10%; width: 15%;">1</div>
                <div class="gantt-bar" style="left: 40%; width: 15%;">2</div>
                <div class="gantt-bar" style="left: 70%; width: 15%;">3</div>
              </div>
            </div>
            <div class="gantt-row">
              <div class="gantt-label">xx科室</div>
              <div class="gantt-timeline">
                <div class="gantt-bar" style="left: 25%; width: 15%;">4</div>
                <div class="gantt-bar" style="left: 55%; width: 15%;">5</div>
              </div>
            </div>
            <div class="gantt-row">
              <div class="gantt-label">xx科室</div>
              <div class="gantt-timeline">
                <div class="gantt-bar" style="left: 15%; width: 15%;">6</div>
                <div class="gantt-bar" style="left: 45%; width: 15%;">7</div>
                <div class="gantt-bar" style="left: 75%; width: 15%;">8</div>
              </div>
            </div>
            <div class="gantt-row">
              <div class="gantt-label">xx科室</div>
              <div class="gantt-timeline">
                <div class="gantt-bar" style="left: 20%; width: 15%;">9</div>
                <div class="gantt-bar" style="left: 50%; width: 15%;">10</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-text">
          <div style="display: flex; justify-content: space-between; margin-top: 10px;">
            <span>10月</span>
            <span>11月</span>
            <span>12月</span>
            <span>1月</span>
            <span>2月</span>
            <span>3月</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 详细数据页 -->
  <div id="detailPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>详细数据</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📈</span>
          趋势折线（近12个月）
        </div>
        <div class="chart-placeholder">折线图：孕产妇人数变化</div>
        <div class="info-text">高峰出现在每年8-10月，与入职/转正周期相关。</div>
      </div>

      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🥧</span>
          部门分布
        </div>
        <div class="chart-placeholder">环形图：各科室孕产员工占比</div>
        <div class="info-text">xx科室、xx科室占比最高，建议重点资源倾斜。</div>
      </div>

      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📋</span>
          人员列表
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">张小明</div>
            <div class="service-desc">xx科室 · 孕28周 · 预产期2025-03-15</div>
          </div>
          <span class="status-badge">孕晚期</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">李婷</div>
            <div class="service-desc">xx科室 · 孕12周 · 预产期2025-07-20</div>
          </div>
          <span class="status-badge">孕早期</span>
        </div>
        <button class="btn">导出Excel</button>
      </div>
    </div>
  </div>

  <!-- 案源分配页 -->
  <div id="casePoolPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>案源分配</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📁</span>
          待审案件池
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-number">1,248</div>
            <div class="stat-label">总待审</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">156</div>
            <div class="stat-label">本领域</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">89</div>
            <div class="stat-label">相关领域</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">203</div>
            <div class="stat-label">跨单元</div>
          </div>
        </div>
        <button class="btn">智能分配</button>
      </div>
    </div>
  </div>

  <!-- VPN资源页 -->
  <div id="vpnPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>VPN资源</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">💻</span>
          实时状态
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-number">5/8</div>
            <div class="stat-label">当前空闲</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">3</div>
            <div class="stat-label">已占用</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">6</div>
            <div class="stat-label">待审批</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">1</div>
            <div class="stat-label">紧急插队</div>
          </div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">张小明</div>
            <div class="service-desc">孕28周 · 处理审限案件 · 剩余2h</div>
          </div>
          <span class="status-badge">高优先级</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">李婷</div>
            <div class="service-desc">孕12周 · 常规任务 · 剩余4h</div>
          </div>
          <span class="status-badge">正常</span>
        </div>
        <button class="btn">审批预约</button>
      </div>
    </div>
  </div>

  <!-- 关怀资源页 -->
  <div id="carePage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>关怀资源</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🍼</span>
          母婴室
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-number">3/5</div>
            <div class="stat-label">当前空闲</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">8</div>
            <div class="stat-label">今日预约</div>
          </div>
        </div>
        <!-- 一周使用高峰折线图 -->
        <div class="chart-container">
          <div class="chart-title">一周使用高峰</div>
          <div class="chart">
            <div class="line-chart">
              <svg viewBox="0 0 400 200" width="100%" height="100%">
                <!-- 网格线 -->
                <line x1="40" y1="20" x2="40" y2="180" stroke="#e0e0e0" stroke-width="1"/>
                <line x1="40" y1="180" x2="360" y2="180" stroke="#e0e0e0" stroke-width="1"/>
                
                <!-- 折线 -->
                <polyline points="40,120 80,100 120,80 160,60 200,100 240,140 280,120" 
                          fill="none" stroke="#ff9a9e" stroke-width="3"/>
                
                <!-- 数据点 -->
                <circle cx="40" cy="120" r="4" fill="#ff9a9e"/>
                <circle cx="80" cy="100" r="4" fill="#ff9a9e"/>
                <circle cx="120" cy="80" r="4" fill="#ff9a9e"/>
                <circle cx="160" cy="60" r="4" fill="#ff9a9e"/>
                <circle cx="200" cy="100" r="4" fill="#ff9a9e"/>
                <circle cx="240" cy="140" r="4" fill="#ff9a9e"/>
                <circle cx="280" cy="120" r="4" fill="#ff9a9e"/>
                
                <!-- X轴标签 -->
                <text x="40" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周一</text>
                <text x="80" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周二</text>
                <text x="120" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周三</text>
                <text x="160" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周四</text>
                <text x="200" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周五</text>
                <text x="240" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周六</text>
                <text x="280" y="195" font-size="10" fill="#8a6d7c" text-anchor="middle">周日</text>
                
                <!-- Y轴标签 -->
                <text x="25" y="25" font-size="10" fill="#8a6d7c" text-anchor="end">20</text>
                <text x="25" y="65" font-size="10" fill="#8a6d7c" text-anchor="end">15</text>
                <text x="25" y="105" font-size="10" fill="#8a6d7c" text-anchor="end">10</text>
                <text x="25" y="145" font-size="10" fill="#8a6d7c" text-anchor="end">5</text>
                <text x="25" y="185" font-size="10" fill="#8a6d7c" text-anchor="end">0</text>
              </svg>
            </div>
          </div>
        </div>
        <div class="info-text">高峰期：周三、周四，建议增加清洁巡查。</div>
      </div>

      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🚗</span>
          孕产车位
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-number">18/30</div>
            <div class="stat-label">已预约</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">92%</div>
            <div class="stat-label">使用率</div>
          </div>
        </div>
        <div class="info-text">明日预约已满，建议考虑扩容或错峰引导。</div>
        <button class="btn">查看明细</button>
      </div>

      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🍱</span>
          营养餐
        </div>
        <div class="stat-grid">
          <div class="stat-item">
            <div class="stat-number">156</div>
            <div class="stat-label">本周订单</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">98%</div>
            <div class="stat-label">满意度</div>
          </div>
        </div>
        <div class="info-text">最受欢迎：低GI套餐、DHA套餐。</div>
      </div>
    </div>
  </div>

  <!-- 审限预警页 -->
  <div id="deadlinePage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>审限预警</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">⏰</span>
          即将到期案件
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">案件编号：2024-1234</div>
            <div class="service-desc">发明申请 · 剩余3天 · 负责人：张小明</div>
          </div>
          <span class="status-badge busy">紧急</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">案件编号：2024-1235</div>
            <div class="service-desc">实用新型 · 剩余7天 · 负责人：李婷</div>
          </div>
          <span class="status-badge">正常</span>
        </div>
        <button class="btn">查看全部</button>
      </div>
    </div>
  </div>

  <!-- 健康预警页 -->
  <div id="healthPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>健康预警</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🏥</span>
          孕晚期名单
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">张小明</div>
            <div class="service-desc">xx科室 · 孕32周 · 建议准备交接</div>
          </div>
          <span class="status-badge">孕晚期</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">王芳</div>
            <div class="service-desc">xx科室 · 孕30周 · 产检提醒</div>
          </div>
          <span class="status-badge">孕晚期</span>
        </div>
        <button class="btn">查看全部</button>
      </div>
    </div>
  </div>

  <!-- 数据导出页 -->
  <div id="exportPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>数据导出</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📊</span>
          图表导出
        </div>
        <button class="btn">导出PNG高清图</button>
        <button class="btn">导出PDF报告</button>
      </div>
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📋</span>
          数据导出
        </div>
        <button class="btn">导出Excel数据表</button>
        <button class="btn">导出CSV原始数据</button>
      </div>
    </div>
  </div>

  <script>
    // 页面切换功能
    function showPage(pageId) {
      // 隐藏所有页面
      document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示目标页面
      document.getElementById(pageId).classList.add('active');
      
      // 滚动到顶部
      window.scrollTo(0, 0);
    }

    // 显示图表模态框
    function showChartsModal() {
      document.getElementById('chartsModal').classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    // 关闭图表模态框
    function closeChartsModal() {
      document.getElementById('chartsModal').classList.remove('active');
      document.body.style.overflow = 'auto';
    }

    // 点击模态框背景关闭
    document.getElementById('chartsModal').addEventListener('click', function(e) {
      if (e.target === this) {
        closeChartsModal();
      }
    });

    // 阻止模态框内容点击事件冒泡
    document.querySelector('.modal-content').addEventListener('click', function(e) {
      e.stopPropagation();
    });

    // 修复返回按钮功能 - 移除原来的history.back()逻辑
    document.querySelectorAll('.back-btn').forEach(btn => {
      // 移除之前的事件监听器
      btn.removeEventListener('click', function() {
        window.history.back();
      });
    });

    // 模拟数据更新
    function updateStats() {
      // 这里可以添加实时数据更新逻辑
      console.log('统计数据已更新');

      window.guanliManager.refresh();
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      console.log('管理者模块已加载');
      
      // 可以在这里添加数据初始化逻辑
      // 例如：从后端获取最新数据并更新界面
      
      // 模拟定期更新
      setInterval(updateStats, 5000); // 每5秒更新一次

      // 确保数据最新
      if (window.guanliManager) {
          window.guanliManager.refresh();
      }
    });

    // 导出功能
    function exportData(format) {
      // 模拟导出功能
      const message = `正在导出${format}格式数据...`;
      console.log(message);
      
      // 显示提示信息
      const toast = document.createElement('div');
      toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 12px 24px;
        border-radius: 20px;
        font-size: 14px;
        z-index: 3000;
        animation: fadeIn 0.3s ease;
      `;
      toast.textContent = message;
      document.body.appendChild(toast);
      
      setTimeout(() => {
        toast.remove();
      }, 2000);
    }

    // 为导出按钮添加事件监听
    document.querySelectorAll('#exportPage .btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const format = this.textContent.includes('PNG') ? 'PNG' : 
                     this.textContent.includes('PDF') ? 'PDF' : 
                     this.textContent.includes('Excel') ? 'Excel' : 'CSV';
        exportData(format);
      });
    });

  </script>
</body>
</html>